<template>
        <view class="shopcard" @tap="toDetail">
            <view class="shopcard-img">
              <image  v-if="item.cardCarPhoto"  mode="aspectFill" :src="item.cardCarPhoto" />
              <image  v-else  src="/static/images/blank.png" />
            </view>
            <view class="box">
                    <view class="shopcard-name">
                    
                       {{item.cardName}}
                    </view>

                    <view class="bottom">    
                            <view class="l">
                                <text class="now"><text class="unit">￥</text>{{item.cardCurrentprice}}</text>
                                <text class="old"><text class="unit">￥</text>{{item.cardOriginalprice}}</text>
                            </view>
                            <view class="r">
                                    已售 {{item.cardSales || 0}} 
                            </view>
                    </view>    
            </view>
        </view> 
</template>
<script>

export default {
        data(){
            return{
                 stateName:{
                    1:"爆品卡",
                    2:"积分卡"
                }
            }
           
        },
        props:{
            item:{
                type:Object,
                default:{}
            }
        },
        methods:{
            toDetail(){
                let { cardId } = this.item;
                uni.navigateTo({
                    url: `/detailPackages/pages/beautyDetail/index?cid=${cardId}`
                })
            }
        }
     
      

}

</script>
<style lang="scss">
    .shopcard{
    
    background: #fff;
    border-radius: 15rpx;
    overflow: hidden;

    .icon{
        display: inline-block;
        width: 60rpx;
        height:28rpx;
        line-height:28rpx;
        text-align: center;
        font-size: 22rpx;
        background: #FF3333;
        color: #fff;
        margin-right: 5rpx;
        border-radius: 8rpx 8rpx 0rpx 8rpx;
        overflow: hidden;
        

    }
    &-img{
        width:345rpx;
        height:345rpx;
        text-align: center;
        overflow: hidden;
      
        image{
            width:345rpx;
            height:345rpx;
           
          
        }
    }
    
    .box{
        padding: 20rpx 15rpx;
        background: #fff;
       
   
    }
    &-name{
        font-size:32rpx;
        color:#333;
        line-height: 32rpx;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        height: 64rpx;
       

    }

    .bottom{
        overflow: hidden;
        line-height: 26rpx;
        padding-top:20rpx;
    }
    .r{
        float:right;
        font-size:24rpx;
        color:#999;
    }
    .l{
        float: left;
    }
    .now{
        font-size:32rpx;
        color:#ff0000;
        margin-right: 5rpx;
       
    }
    .old{
        font-size:24rpx;
        color:#999;
        text-decoration: line-through;
    }
    .unit{
        font-size:18rpx;
    }
}
</style>